<template>
	<view>
		<view class="aside-nav bounceInUp animated ">
			<p class="aside-menu">{{menuList.title}}</p>
			<p class="menu-item " @click="menuChange(index,item)" :class="['menu-'+item.key]" v-for="(item,index) in menuList.children"
			 :key="index">{{item.value}}</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				menuList: {
					title: '菜单',
					children: [{
						key: 'first',
						value: '抖音',
						back: false
					}, {
						key: 'second',
						value: '热点',
						back: false
					}, {
						key: 'third',
						value: '壁纸',
						back: false
					}, {
						key: 'fourth',
						value: '我的',
						back: false
					}]
				}
			}
		},
		methods: {
			menuChange(index, item) {
				this.$emit("menuChange", index, item)
			}
		}
	}
</script>

<style>
	.aside-nav {
		position: fixed;
		bottom: 70px;
		right: 5px;
		width: 80px;
		height: 50px;
		opacity: .75;
		z-index: 999999;
	}

	.aside-nav .aside-menu {
		position: absolute;
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background: #333333;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		text-align: center;
		line-height: 70px;
		color: #fff;
		font-size: 16px;
		z-index: 1;
	}

	.aside-nav .menu-item {
		position: absolute;
		width: 50px;
		height: 50px;
		background: #333333;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		font-size: 14px;
		line-height: 50px;
		text-align: center;
		border-radius: 50%;
		text-decoration: none;
		color: #fff;
		transition: background .5s, -webkit-transform .6s;
		transition: transform .6s, background .5s;
		transition: transform .6s, background .5s, -webkit-transform .6s, -moz-transform .6s;
		font-size: 16px;
		box-sizing: border-box
	}

	.aside-nav .menu-item:hover {
		opacity: .5;
	}

	.aside-nav:hover .aside-menu {
		animation: jello 1s
	}

	.aside-nav:hover .menu-first {
		transform: translate3d(0, -135%, 0)
	}

	.aside-nav:hover .menu-second {
		transform: translate3d(-120%, -70%, 0)
	}

	.aside-nav:hover .menu-third {
		transform: translate3d(-120%, 70%, 0)
	}

	.aside-nav:hover .menu-fourth {
		transform: translate3d(0, 135%, 0)
	}

	@-webkit-keyframes jello {

		from,
		11.1%,
		to {
			transform: none
		}

		22.2% {
			transform: skewX(-12.5deg) skewY(-12.5deg)
		}

		33.3% {
			transform: skewX(6.25deg) skewY(6.25deg)
		}

		44.4% {
			transform: skewX(-3.125deg) skewY(-3.125deg)
		}

		55.5% {
			transform: skewX(1.5625deg) skewY(1.5625deg)
		}

		66.6% {
			transform: skewX(-.78125deg) skewY(-.78125deg)
		}

		77.7% {
			transform: skewX(0.390625deg) skewY(0.390625deg)
		}

		88.8% {
			transform: skewX(-.1953125deg) skewY(-.1953125deg)
		}
	}

	@-moz-keyframes jello {

		from,
		11.1%,
		to {
			transform: none
		}

		22.2% {
			transform: skewX(-12.5deg) skewY(-12.5deg)
		}

		33.3% {
			transform: skewX(6.25deg) skewY(6.25deg)
		}

		44.4% {
			transform: skewX(-3.125deg) skewY(-3.125deg)
		}

		55.5% {
			transform: skewX(1.5625deg) skewY(1.5625deg)
		}

		66.6% {
			transform: skewX(-.78125deg) skewY(-.78125deg)
		}

		77.7% {
			transform: skewX(0.390625deg) skewY(0.390625deg)
		}

		88.8% {
			transform: skewX(-.1953125deg) skewY(-.1953125deg)
		}
	}

	@keyframes jello {

		from,
		11.1%,
		to {
			transform: none
		}

		22.2% {
			transform: skewX(-12.5deg) skewY(-12.5deg)
		}

		33.3% {
			transform: skewX(6.25deg) skewY(6.25deg)
		}

		44.4% {
			transform: skewX(-3.125deg) skewY(-3.125deg)
		}

		55.5% {
			transform: skewX(1.5625deg) skewY(1.5625deg)
		}

		66.6% {
			transform: skewX(-.78125deg) skewY(-.78125deg)
		}

		77.7% {
			transform: skewX(0.390625deg) skewY(0.390625deg)
		}

		88.8% {
			transform: skewX(-.1953125deg) skewY(-.1953125deg)
		}
	}

	.animated {
		animation-duration: 1s;
		animation-fill-mode: both
	}

	@-webkit-keyframes bounceInUp {

		from,
		60%,
		75%,
		90%,
		to {
			animation-timing-function: cubic-bezier(.215, .61, .355, 1)
		}

		from {
			opacity: 0;
			transform: translate3d(0, 800px, 0)
		}

		60% {
			opacity: 1;
			transform: translate3d(0, -20px, 0)
		}

		75% {
			transform: translate3d(0, 10px, 0)
		}

		90% {
			transform: translate3d(0, -5px, 0)
		}

		to {
			transform: translate3d(0, 0, 0)
		}
	}

	@-moz-keyframes bounceInUp {

		from,
		60%,
		75%,
		90%,
		to {
			animation-timing-function: cubic-bezier(.215, .61, .355, 1)
		}

		from {
			opacity: 0;
			transform: translate3d(0, 800px, 0)
		}

		60% {
			opacity: 1;
			transform: translate3d(0, -20px, 0)
		}

		75% {
			transform: translate3d(0, 10px, 0)
		}

		90% {
			transform: translate3d(0, -5px, 0)
		}

		to {
			transform: translate3d(0, 0, 0)
		}
	}

	@keyframes bounceInUp {

		from,
		60%,
		75%,
		90%,
		to {
			animation-timing-function: cubic-bezier(.215, .61, .355, 1)
		}

		from {
			opacity: 0;
			transform: translate3d(0, 800px, 0)
		}

		60% {
			opacity: 1;
			transform: translate3d(0, -20px, 0)
		}

		75% {
			transform: translate3d(0, 10px, 0)
		}

		90% {
			transform: translate3d(0, -5px, 0)
		}

		to {
			transform: translate3d(0, 0, 0)
		}
	}

	.bounceInUp {
		animation-name: bounceInUp;
		animation-delay: 1s
	}
</style>
